<template>
  <div>
    <div class="cate">
      <div class="left">
        <div 
          v-for="(cate, index) in cates"
          :key="cate.id"
          :class="{active:index===num}"
          @click="changeTab(index)"
        >
          {{ cate.name }}
        </div>
      </div>
      <div class="right">
        <div 
          class="item"
          v-for="item in items"  
          :key="item.id"
        >
        {{ item.name }}
        </div>
      </div>
    </div>
    <my-tabbar/>
  </div>
</template>

<script>
import { fetchAllCates, fetchItems } from 'api'
import MyTabbar from 'components/MyTabbar'
export default {
  data () {
    return {
      cates: [],
      items: [],
      num: 0
    }
  },
  created () {
    this.fetchAllCates()
   
  },
  methods: {
    changeTab (index) {
      // 点击切换分类
      this.num = index;
      this.fetchItmes();
    },
    fetchAllCates(){ //获取所有分类
      fetchAllCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          // 首次调用获取 商品列表函数
          this.fetchItmes()
        }
      })
    },
    fetchItmes () {
      // 获取 某分类下所有商品
      this.items = []
      fetchItems({
        categoryId: this.cates[this.num].id
      }).then(res=>{
        console.log(res)
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    }
  },
  components: {
    MyTabbar
  }
}
</script>

<style lang="scss" scoped>
.cate{
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom: 50px;
 
  display: flex;
  .left{
    flex:3;
    
    height:100%;
    font-size:14px;
    color:#666;
    text-align: center;
    line-height:40px;
    border-right:1px solid rgb(119, 167, 75);
    .active{
      background: rgb(238, 223, 175);
      color:#fff;
    }
  }
  .right{
    flex:10;
    
    height:100%;
    display: flex;
    flex-wrap:wrap;
  }
}
</style>
